<!--任务基本盘筛选器
1.时间筛选器暂未做
2.返回数据格式暂未做
3.父组件用filterData获取数据 
-->
<template>
  <div>
    <div class="screen-content">
      <div v-for="item in structure" :key="item.id" class="screen-entry">
        <span class="screen-title">
          {{ item.name }}
        </span>
        <span
          v-for="info in item.info"
          :key="info.name"
          class="screen-info"
          @click="add(item.enName, info.name)"
        >
          {{ info.name }}
        </span>
      </div>
    </div>
    <div class="screen-result-content">
      <span
        class="screen-result"
        v-for="item in screen"
        v-if="item.cnName.length > 0"
        :key="item.id"
      >
        <span class="screen-result-info"> {{ item.cnName }}</span>
        <span class="screen-result-icon" @click="delet(item.id)"></span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      structure: [
        {
          id: 0,
          name: "仪表",
          enName: "meter",
          info: [
            { name: "任务基本盘" },
            { name: "团队任务完成率排行" },
            { name: "个人任务完成率排行" },
            { name: "延期任务排行" },
          ],
        },
        {
          id: 1,
          name: "项目",
          enName: "project",
          info: [
            { name: "全部项目" },
            { name: "神途" },
            { name: "神兔营地" },
            { name: "萌途" },
            { name: "版本中心" },
            { name: "官网" },
          ],
        },
        {
          id: 2,
          name: "团队",
          enName: "team",
          info: [
            { name: "全部团队" },
            { name: "神途项目组" },
            { name: "产品运行事业部" },
            { name: "人事行政部" },
            { name: "财务部" },
            { name: "营销事业部" },
            { name: "研发部" },
          ],
        },
        {
          id: 3,
          name: "时间",
          enName: "time",
          info: [
            { name: "不限时间" },
            { name: "本周" },
            { name: "上周" },
            { name: "本月" },
            { name: "上月" },
            { name: "最近30天" },
            { name: "最近60天" },
            { name: "最近90天" },
            { name: "最近半年" },
            { name: "选择时间" },
          ],
        },
      ],
      screen: [],
    };
  },
  methods: {
    sendFilterData() {
      //数据处理暂定，和后端协商后
      this.$emit("filterData", this.screen);
    },
    add(enName, cnName) {
      let cnNameStr = "";
      let enNameStr = "";
      this.screen.forEach((item) => {
        cnNameStr += cnNameStr.indexOf(item.cnName) == -1 ? item.cnName : "";
        enNameStr += enNameStr.indexOf(item.enName) == -1 ? item.enName : "";
      });
      if (enName == "time") {
        //单选
        if (enNameStr.indexOf(enName) == -1) {
          this.screen.push({ id: new Date().getTime(), enName, cnName });
        }
      } else {
        //多选 : 数组 还是多个对象 待确定
        if (cnNameStr.indexOf(cnName) == -1) {
          this.screen.push({ id: new Date().getTime(), enName, cnName });
        }
      }
      this.sendFilterData();
    },
    delet(id) {
      this.screen = this.screen.filter((item) => item.id != id);
      this.sendFilterData();
    },
  },
};
</script>

<style lang="scss" scoped>
.screen-content {
  width: 100%;
  background: #f2f2f2;
  padding-top: 8px;
  border: 1px solid #b4bbc5;
  border-bottom: 0px;
  .screen-entry {
    border-bottom: 1px solid #b4bbc5;
    padding: 8px;
    .screen-title {
      background: #b4bbc5;
      margin-right: 15px;
      padding: 3px;
      font-size: 14px;
    }
    .screen-info {
      cursor: pointer;
      font-size: 16px;
      margin-right: 30px;
    }
  }
}
.screen-result-content {
  height: 10px;
  width: 100%;
  margin: 10px 0 10px 0;
  .screen-result {
    display: inline-block;
    margin-right: 40px;

    .screen-result-info {
      position: relative;
      display: inline-block;
      min-width: 90px;
      padding: 2px;
      color: #333;
      background-color: rgba(242, 242, 242, 1);
      border: 1px solid rgba(201, 201, 201, 1);
    }
    .screen-result-icon {
      display: inline-block;
      position: absolute;
      height: 24px;
      width: 24px;
      background-color: rgba(242, 242, 242, 1);
      border: 1px solid rgba(201, 201, 201, 1);
      border-left: 0px;
      cursor: pointer;
      &:before {
        content: "";
        display: inline-block;
        position: relative;
        left: -4px;
        top: -2px;
        transform: rotate(45deg);
        width: 30px;
        border: 0.5px solid rgba(201, 201, 201, 1);
      }
      &:after {
        content: "";
        display: inline-block;
        position: relative;
        left: -4px;
        top: -20px;
        transform: rotate(-45deg);
        width: 30px;
        border: 0.5px solid rgba(201, 201, 201, 1);
      }
    }
  }
}
</style>
